<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>login</title>
    <script  th:src="@{/static/js/jquery-2.2.3.min.js}"></script>
    <script th:src="@{/static/js/jquery-ui.min.js}"></script>

    <link type="text/css" th:href="@{/static/css/jquery-ui.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <link type="text/css" th:href="@{/static/css/login.css}" rel="stylesheet">
    <SCRIPT language = "JavaScript" th:inline="javascript">

        $(function () {

            /*<![CDATA[*/
            var ctxPath =/*[[@{/}]]*/;
            /*]]>*/
            $("#Button").click(function () {
                if(validateform()){
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        contentType: "application/json", //默认值为表单提交
                        dataType: "json",//预期服务器返回的数据类型
                        url: ctxPath+"/login" ,//url
                        data: JSON.stringify({
                            username :$("#username").val(),
                            password: $("#password").val()
                         }),
                        success: function (result) {
                            if (result.code == 200) {
                                window.location.href=ctxPath+"/resume/index"
                            }else{
                                alert(result.msg)
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    });
                }
            });

            // 通过jqurey修改
            $("#passwordeye").click(function(){
                let type =  $("#password").attr('type');
                if(type === "password"){
                    $("#password").attr("type","text");
                }else{
                    $("#password").attr("type","password");
                }
            });
        });

        function validateform(){
            if(checkUserName()&&passCheck( ))
                return true;
            else
                return false;
        }
        function checkUserName(){    //验证用户名
            var fname = document.myform.username.value;
            if(fname.length== 0){
                alert("请输入用户名");
                document.myform.username.focus();
                return false;
            }
            return true;
        }

        function passCheck(){ //验证密码
            var userpass = document.myform.password.value;
            if(userpass == "")
            {
                alert("未输入密码 \n" + "请输入密码");
                document.myform.password.focus();
                return false;
            }
            return true;
        }


    </SCRIPT>
</head>
<body>
<img th:href="@{/static/img/login_bg.jpg}" class="bg">
<div id="center">
    <form name="myform" id="myform"    method="post"  onsubmit="return false">
        <div class="input-group">
            <h3>用户名：</h3>&nbsp;<input class="form-control" id="username" name="username" type="text"  style="height:40px" value="" placeholder="用户名"/>
        </div>
        <div class="input-group">
            <h3>密&nbsp;&nbsp;&nbsp;码：</h3>&nbsp;<input class="form-control" id="password" name="password" type="password" style="height:40px"  value="" placeholder="密码"/>
            <span class="input-group-btn">
			<INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide">
        </span>
        </div>

        <div id="btn">
            <INPUT class="btn btn-primary" name="loginButton" type="submit" id="Button" value="登陆">&nbsp;
        </div>
    </form>
</div>
<div id="bottom">
    <div class="footer" style="color:white;">
        Copyright &copy; 2013-2019 All Rights Reserved. 备案号：
    </div>
</div>
</body>
</html>
